<template>
	<view class="contanier">
		<view class="title">
			<text>运动健身后台系统欢迎您</text>
		</view>
		<img class="bg"
			src='https://mp-ae8470f8-f547-41b1-b360-006dd10063b9.cdn.bspapp.com/cloudstorage/bg-admin.png' />
		<view class="loginF">
			<view class="head" style="width: 100%; ">
				<text style="letter-spacing: 2px;">登录</text>
				<text style="letter-spacing: 1px;color:gray;font-size: 18px">(管理员端）</text>
			</view>
			<div class="content" style="100%">
				<view class="form-item">
					<span>账号</span>
					<uni-easyinput v-model.trim="Taccount" placeholder="请输入账号" />
				</view>
				<view class="form-item">
					<span>密码</span>
					<uni-easyinput v-model.trim="Tpassword" placeholder="请输入密码" type="password" />
				</view>
				<view class="form-item">
					<span>确认密码</span>
					<uni-easyinput v-model.trim="TRpassword" placeholder="请输入确认密码" type="password" />
				</view>
				<view class="form-item">
					<view class="argument">
						<label>
							<checkbox ref="checkBox" />
						</label>
						<span class="argument-item" style="color:  black;">
							我已经阅读并同意
						</span>
						<span class="argument-item">
							《用户服务协议》
						</span>
						<span class="argument-item" style="width: 100px;">
							《个人信息保护政策》
						</span>
					</view>
				</view>
				<view class="form-item" style="text-align: center;">
					<button type="primary" @click="loginAdmin" size="mini">登录</button>
				</view>
			</div>
		</view>
	</view>

</template>


<script>
	import {
		check,
		getUserInfoData
	} from '../../database/index.js'
	export default {
		data() {
			return {
				msgType: 'info',
				messageText: '',
				Taccount: "",
				Tpassword: "",
				TRpassword: "",
			}
		},

		methods: {
			async loginAdmin() {
				try {
					if (this.Taccount == '') {
						this.$showMsg('账号不能为空')
						return
					}
					if (this.Tpassword == '') {
						this.$showMsg('密码不能为空')
						return
					}
					if (this.Tpassword != this.TRpassword || this.TRpassword == '') {
						this.$showMsg('密码不一致')
						return
					}
					if (!this.$refs.checkBox.checkboxChecked) {
						this.$showMsg('请勾选协议')
						return
					}
					let [res, data] = await check('admin', [{
						admin_account: this.Taccount,
						admin_pwd: this.Tpassword
					}])

					if (!res) {
						let user = await getUserInfoData({
							admin_account: this.Taccount,
						})
						await this.$store.commit('setUser', user)
						this.$go2Page('index')
						this.$showMsg('登录成功')
						this.Taccount = ""
						this.Tpassword = ""
						this.TRpassword = ''
						this.$refs.checkBox.checkboxChecked = false
					} else {
						this.$showMsg('登录失败，用户名或密码错误')
					}
				} catch (err) {
					console.error(err)
				}
			},
		}

	}
</script>
<style>
	page {
		background: linear-gradient(to bottom right, #7B68EE 60%, #1E90FF)
	}
</style>
<!-- 最新 -->

<style lang='scss' scoped>
	$checkBox: 14px;

	button {
		width: 200px;
		padding-left: 30px;
		letter-spacing: 15px;
	}

	::v-deep {
		.uni-checkbox-wrapper {

			.uni-checkbox-input {
				width: $checkBox;
				height: $checkBox;

			}
		}
	}

	.contanier {

		position: relative;
		height: 100vh;
		width: 100vw;

		.title {
			right: 150px;
			top: 160px;
			position: absolute;
			color: white;
			font-size: 35px;
			letter-spacing: 6px;
		}

		.bg {
			position: absolute;
			top: 150px;
			left: 200px;
			width: 600px;
		}
	}

	.loginF {
		border-radius: 10px;
		padding: 15px 30px;
		position: absolute;
		right: 200px;
		top: 220px;
		width: 300px;
		background: rgba(255, 255, 255, 1);

		.head {
			letter-spacing: 20px;
			padding-left: 20px;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			color: #5F9EA0;
		}

		.form-item {
			span {
				display: inline-block;
				text-align: right;
				width: 80px;
				letter-spacing: 2px;
			}

			.argument {
				letter-spacing: 0;
				display: inline-block;
				font-size: 10px;
				width: 100%;
				text-align: left;

				.argument-item {
					display: inline-block;
					letter-spacing: 0;
					color: skyblue;

				}


			}

			margin-top: 12px;

			.uni-easyinput {
				width: 180px;
				display: inline-block;
				margin-left: 15px;
			}

			&:last-child {
				text-align: right;
				font-size: 12px;

				span {
					width: 60px;
					text-decoration: underline;
					margin-right: 2px;

				}

				width: inherit;
				color: gray;
			}
		}



	}
</style>